<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 组题列表 -->
        <el-form label-width="80px" ref="refKeyword">
          <!-- 首行 -->
          <el-form-item label="关键字">
            <el-row type="flex" justify="space-between">
              <el-input
                placeholder="根据编号搜索"
                size="mini"
                style="width: 250px"
                v-model.trim="query.keyword"
              ></el-input>
              <el-button-group>
                <el-button size="small" @click="clear">清除</el-button>
                <el-button
                  type="primary"
                  size="small"
                  style="margin-left: 10px"
                  @click="seachForm"
                  >搜索</el-button
                >
              </el-button-group>
            </el-row>
          </el-form-item>

          <!-- 总数 -->
          <el-alert :title="cTitle" type="info" show-icon :closable="false">
          </el-alert>

          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="220">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="100">
              <template #default="{ row }">
                <span v-if="row.questionType === '1'">单选</span>
                <span v-if="row.questionType === '2'">多选</span>
                <span v-if="row.questionType === '3'">简答</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="questionIDs.number"
              label="题目编号"
              width="250"
            >
              <template #default="{ row }">
                <!-- <el-button type="text" v-for="(item,index) in row.questionIDs" :key="index">{{item.number}}</el-button> -->
                <div
                  v-for="(item, index) in row.questionIDs"
                  :key="index"
                  @click="handleView(item.id)"
                >
                  <a href="#" style="color: rgb(0, 153, 255)">{{
                    item.number
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间" width="300">
            </el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间(s)">
            </el-table-column>
            <el-table-column prop="accuracyRate" label="正确率(%)">
            </el-table-column>
            <el-table-column prop="userName" label="录入人"> </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                  @click="handleDel(row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <el-row type="flex" justify="end" align="middle" style="height: 60px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.page"
              :page-sizes="[20, 30, 40, 50]"
              :page-size="query.pagesize"
              layout=" prev, pager, next,sizes,jumper"
              :total="query.counts"
              background
            >
            </el-pagination>
          </el-row>

        </el-form>
      </el-card>
    </div>
    <!-- 题目预览弹窗 -->

    <articles-preview
      :showDialog="showDialog"
      @handleClose="handleClose"
      ref="refView"
    ></articles-preview>
  </div>
</template>

<script>

import { randoms, removeRandoms } from '@/api/hmmm/questions'
import ArticlesPreview from '../components/articles-preview.vue'

//

export default {
  components: { ArticlesPreview },
  data () {
    return {
      tableData: [
        // {
        //   id: '', // 编号
        //   addTime: '', // 组题时间
        //   userName: '', // 用户名
        //   questionIDs: '', // 试题ID
        //   progressOfAnswer: '', // 答题进度
        //   accuracyRate: '', // 正确率
        //   totalSeconds: '', // 答题总耗时
        //   questionType: '' // 组题类型
        // }
      ],
      // 接口传参
      query: {
        page: 1,
        pagesize: 20,
        counts: 0, // 总数
        pages: '',
        items: {},
        keyword: ''
      },
      showDialog: false // 控制弹窗

    }
  },
  // 初始化渲染
  created () {
    this.randomsList()
  },
  // 总数
  computed: {
    cTitle () {
      return '数据一共 ' + this.query.counts + ' 条'
    }
  },
  methods: {
    // 页面渲染
    async randomsList () {
      const res = await randoms(this.query)
      this.tableData = res.data.items
      this.query.counts = res.data.counts
      // this.query.pages=
      // console.log(res)
    },
    // 分页器
    // 当前页
    handleCurrentChange (val) {
      // console.log('handleCurrentChange', `当前页: ${val}`)
      this.query.page = val
      this.randomsList()
    },
    // 每页多少条
    handleSizeChange (val) {
      // console.log('handleSizeChange', `每页 ${val} 条`)
      this.query.pagesize = val
      this.randomsList()
    },
    // 删除
    handleDel (id) {
      // console.log(id)
      // 提示框
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ ...this.tableData, id })
          // console.log(res)
          // 判断当前页面是否是只剩一条，删除后页面进行减1
          if (this.tableData.length === 1 && this.query.page > 1) {
            this.query.page--
          }
          // 页面渲染 消息提醒
          this.randomsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索
    async seachForm () {
      // console.log(1)
      this.query.page = 1
      // 输入为空
      if (this.query.keyword === '') {
        this.query.page = 1
        this.randomsList()
      } else {
        // 输入有值传后端 页面渲染
        const res = await randoms({
          ...this.query,
          keyword: this.query.keyword
        })
        this.tableData = res.items
        this.randomsList()
      }
    },
    // 清除
    clear () {
      // 赋值为空
      this.query.keyword = ''
      this.randomsList()
    },
    // 题目预览
    async handleView (id) {
      this.showDialog = true
      console.log(id)

      this.$refs.refView.detailList(id)
    },
    // 关闭弹窗
    handleClose () {
      this.showDialog = false
    }
  }
}
</script>

<style scoped></style>
